![.NET MAUI で Microsoft.Maui.Graphics.Controls を使ってみた](https://devio2023-media.developers.io/wp-content/uploads/2021/07/NET_Logo.png)
.NET MAUI で Microsoft.Maui.Graphics.Controls を使ってみた
いわさです。
.NET MAUI を使うと、Visual Studio と .NET でクロスプラットフォームアプリケーションを開発することが出来ます。
これまでいくつか試した際には標準コンポーネントを使いました。そしてそれらは各プラットフォームではネイティブコンポーネントとしてレンダリングされています。
.NET MAUI ではクロスプラットフォームのグラフィックライブラリとして Microsoft.Maui.Graphics
というものがあります。
これを使うと、共通のAPIでプラットフォーム間で同じ描画コードを使うことが出来ます。
そして、さらにそれを使ってコンポーネントを独自レンダリングさせるためのライブラリ、Microsoft.Maui.Graphics.Controls
というものが存在します。
本日はこちらを試してみました。
一点注意事項があって、Microsoft.Maui.Graphics.Controls
はまだプレリリース段階のものになりますので、プロダクトへの導入は控えたほうが良いでしょう。
使ってみる
以下のようにデフォルトで適用されているスタイルを削除し、標準コンポーネントをいくつか以下のように並べてみました。
このアプリケーションに対して、Microsoft.Maui.Graphics.Controls
を導入してみます。
今回はVisual Studio 2022 for Mac で試していますが、Windows版 Visual Studio でも導入の流れは同じです。
まずはじめに、プロジェクトへNuGetパッケージを追加する必要があるのですが、nuget.org
では公開されていません。
専用のパッケージソースを追加し、プレリリース版を導入する必要があります。
https://aka.ms/maui-graphics-controls-nightly/index.json
を追加しましょう。
追加後、「プレリリースを含める」を有効にした状態で、Microsoft.Maui.Graphics.Controls
を検索しパッケージを追加します。
そして、初期化コードで以下のハイライト部分を追加します。
XAML側は特に変更する必要がなくて、以下のコードで一部の対象コンポーネントのレンダラーがDIされ、独自にレンダリングされるコンポーネントに切り替わります。
using Microsoft.Maui.Graphics.Controls.Hosting; namespace hoge0705maui; public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp<App>() .ConfigureGraphicsControls() .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); }); return builder.Build(); } }
以下のようになります。
おぉ。
iOSとAndroidで比較できるように並べてみましたが、一部コンポーネントは見た目が同じになっていますね。
本日時点でサポートされているコントロールは以下です。
Button
CheckBox
DatePicker
Editor
Entry
ProgressBar
RadioButton
Slider
Stepper
Switch
TimePicker
Label
は対象外なので、通常どおりネイティブコンポーネントが描画されておりプラットフォーム間の差分があります。
DrawableType別の比較
さらに、Microsoft.Maui.Graphics.Controls
では3つの外観テーマが用意されています。
- Cupertino
- Material
- Fluent
ConfigureGraphicsControls
でDIする際に、パラメータとして指定することが出来て、全コンポーネント一括での指定になります。
: public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp<App>() .ConfigureGraphicsControls(Microsoft.Maui.Graphics.Controls.DrawableType.Cupertino) .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); }); return builder.Build(); } }
引数なしのデフォルトはDrawableType.Material
となっており、各コンポーネントごとに3種類のレンダリングコンポーネントが実装されています。
例えば、Button
であれば MaterialButtonDrawable
、CupertinoButtonDrawable
、FluentButtonDrawable
の3つが用意されていて、canvas
への描画処理がそれぞれ実装されています。
DrawableType.Cupertino
こちらはCupertino
です。
iOS感がありますね。
SwitchがON/OFF切り替えても常に緑だったので、まだこれからという感じでしょうか。
DrawableType.Fluent
こちらはFluent
です。
Windows感がありますね。
さいごに
本日は .NET MAUI で Microsoft.Maui.Graphics.Controls を使ってみました。
.NET MAUI 標準では良くも悪くもネイティブレンダリングなのでどうしてもプラットフォーム間のレイアウトやスタイルの差が出やすいですが、Flutterのように独自レンダリングでプラットフォーム共通化したいみたいなシーンでは検討の余地ありそうな気がします。
見た目を拡張したい場合もプラットフォームごとに拡張コードを実装しなくて良いのでライブラリが実践投入出来るレベルまであがっていればUI実装を統一するうえでおもしろい選択肢になるかもしれません。